<template>
  <div style=" height: 100%; background-color: #F5F6FA;">
    <!-- <hear></hear> -->
    <div>
      <div class="Guarantee_status_box">
            <el-row  class="mb8">
            <el-col :span="19">
                  <el-button @click="shuaxin" type="info" icon="el-icon-refresh-right"></el-button>
              <!-- <el-button type="danger" @click="del()" icon="el-icon-delete">删除</el-button> -->
            </el-col>
            <el-col :span="5" class="seach">
                <el-input v-model="params.keywords" placeholder="请输入"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="shuaxin"></el-button>
            </el-col>
        </el-row>
      
        <!-- <div class="Guarantee_examine">发票列表</div> -->

<div class="shenflex">
  <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      class="table xinde"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="55"> </el-table-column>

      <el-table-column align="center" prop="fplxdm" label="发票类型代码" width="120">
        <!-- 发票类型代码(004-专票 007-普票 026-电子票)  -->
        <template slot-scope="scope">{{ scope.fplxdm =="004"? "专票" :scope.fplxdm =="007" ? "普票":"电子票" }}</template>
      </el-table-column>
      <el-table-column align="center" prop="djbh" :show-overflow-tooltip="true" label="单据编号" width="120">
      </el-table-column>
      
       <!-- <el-table-column align="center" prop="khsh " :show-overflow-tooltip="true" width="220" label="申请公司税号"> </el-table-column> -->
             <el-table-column align="center" :show-overflow-tooltip="true" prop="ticket_company.kpr" width="120" label="开票人"> </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="spmc" width="120" label="商品名称"> </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="amount" width="120" label="金额"> </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="hsbz" width="120" label="含税"> 
              <template slot-scope="scope">{{ scope.hsbz ? "含税":"不含税" }}</template>
              </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="tax" width="120" label="税率"> </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="ssbm" width="120" label="税收编号"> </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="tax" width="120" label="税率"> </el-table-column>
       <el-table-column align="center" :show-overflow-tooltip="true" prop="ticket_company.gsmc" width="220" label="开票公司名称"> </el-table-column>
          <el-table-column align="center" :show-overflow-tooltip="true" prop="ticket_company.gssh" width="220" label="开票公司税号"> </el-table-column>
              <el-table-column align="center" :show-overflow-tooltip="true" prop="ticket_company.address" width="220" label="开票公司地址"> </el-table-column>
                  <!-- <el-table-column align="center" :show-overflow-tooltip="true" prop="ticket_company.mobile" width="220" label="开票公司联系方式"> </el-table-column> -->
      <el-table-column align="center" prop="khmc" :show-overflow-tooltip="true" width="220" label="申请公司姓名"> </el-table-column>
       <el-table-column align="center" prop="khsh" :show-overflow-tooltip="true" label="申请公司税号" width="220">
      </el-table-column>
          <!-- <el-table-column align="center" prop="apply_company.gssh " :show-overflow-tooltip="true" width="220" label="申请公司税号"> </el-table-column> -->
              <el-table-column align="center" prop="address" :show-overflow-tooltip="true" width="220" label="申请公司地址"> </el-table-column>
                  <el-table-column align="center" prop="mobile" :show-overflow-tooltip="true" width="220" label="申请公司联系方式"> </el-table-column>
                  
      <!-- <el-table-column align="center" prop="createtime" width="220" label="分配时间"> </el-table-column> -->
      <!-- <el-table-column align="center" prop="createtime" label="创建时间" width="200">
      </el-table-column> -->
      <el-table-column  fixed="right" align="center" width="120" label="操作">
        <template slot-scope="scope">
          <!-- <el-button size="mini" @click="handleUpdate(scope.row)"
            >添加步骤</el-button
          >
             <el-button size="mini" @click="buzhlist(scope.row)"
            >步骤列表</el-button
          > -->
          <el-button
            size="mini"
            @click="handlesc(scope.row)"
            >查看发票</el-button
          >
        </template>
      </el-table-column>
    </el-table>
</div>
      </div>
  <el-dialog title="添加步骤" :visible.sync="opens" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      
    
  <div style="display: flex;justify-content: center;margin-top: 20px;">
   <div>
        <el-form-item label="操作名称">
          <el-input v-model="form.operation"></el-input>
        </el-form-item>
        <el-form-item label="审核等级">
          <el-input v-model="form.dengji"></el-input>
        </el-form-item>
   </div>
  </div>
  <div style="display: flex;justify-content: center;">
	 <!-- <el-button @click="buzhoulis" type="primary">确定</el-button> -->
          <el-button style="margin: 0px;" type="primary" >确定</el-button>
          <!-- <el-button @click="cancels">取消</el-button> -->
  </div>
  
      </el-form>
    </el-dialog>
    <el-dialog title="添加流程" :visible.sync="open" width="400px" append-to-body>
      <el-form ref="form" :model="form" label-width="80px" :rules="rules" >
         <el-form-item label="流程名称">
          <el-input v-model="liuch.lc_name"></el-input>
        </el-form-item>
  <div style="display: flex;justify-content: center;margin-top: 20px;">
		

  </div>


      </el-form>
    </el-dialog>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentpage"
          :page-sizes="[10, 20, 30]"
       
          layout="total, sizes, prev, pager, next, jumper"
          :total="limit"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
// import { bhlist } from "@/api/system/liucheng";
// import hear from ".././../components/hear.vue";
import axios from "axios";
export default {
  components: {
    // hear
  },
  name: "progress",
  data() {
    return {
      total: null,
      currentpage: null,
      params: {
        limit: 4,
        offset: 0,
        keywords: "",
        user_id: sessionStorage.getItem("user_id")
      },
      BidingDocumentList: [],
            // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
         opens: false,
        params: {
        offset: 0,
        limit: 10,
        keywords: "",
        zhuangtai: 0,
        user_id: sessionStorage.getItem("id"),
      },
total: null,
limit:"",
      // 表单参数
      form: {
         name1: "",
        name2: "",
        name3: "",
        dept: "",
        user_id:"",
        lc_id:"",
        bm_id: "",
        bm_name: "",
        staff_id: "",
        staff_name: "",
        operation: "",
        dengji: "",
      },
      // 表单校验
      rules: {},
      options1: [], //选择部门
      options2: [], //选择职位
      btype:[],
      options3: [  ], //选择小组
       options4: [  ], //选择小组
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      tableData: [],
      multipleSelection: [],
      liuch:{
user_id	:sessionStorage.getItem("id"),
lc_name	:"",
gtype:"",
      },
      buzhl:false,
      buzhilist:[],
    };
  },
  mounted() {
    // this.getBhlist();
    this.zhifu()
  },
  methods: {
    shuaxin(){
this.zhifu()
    },
       handleUpdate(e) {
      // this.reset();
      this.opens = true;
    //   this.title = "修改员工信息";
    },
    handlesc(e){
      console.log(e)
      var bbc={
        djbh:e.djbh,
      }
      // return
   axios({
        url: "http://192.168.0.28:8082/api/fapiao/get_pdf",
        method: "post", // params: '必须是一个无格式对象 query参数',
        data: {
        ...bbc
        },
        timeout: 1000,
        headers: {
          token: sessionStorage.getItem("token")
        }
      }).then(res => {
        
		console.log("发票pdf",res.data)
         if (res.data.code == 1) {
         
      let link = document.createElement(res.data.pdf_url);
      link.style.display = "none";
      link.style.download = "";
      link.target = "_blank";
      link.href = this.filepath;
      link.setAttribute("download", ".pdf");
      // +'.pdf' 通过不同的后缀名下载不同的文件
      //这里下载的是pdf格式的文件，拿到接口里的res也必须是pdf的文件流
      document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href); //URL.revokeObjectURL() 静态方法用来释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。当你结束使用某个 URL 对象时，应该通过调用这个方法来让浏览器知道不再需要保持这个文件的引用了。
      document.body.removeChild(link);
        } 
        else {
          this.$message.error(res.data.msg);
        }
        // this.$router.push("/BidSecurity/Bidpayment");
      })
          .catch((err) => {
        console.log("失败",err.response.data);
          this.$notify.error({
          message: err.response.data.msg
        });
      })
    },
      buzhlist(e){

this.buzhl=true
},
       	zhifu(){
   axios({
        url: "http://192.168.0.28:8082/api/fapiao/fplist",
        method: "post", // params: '必须是一个无格式对象 query参数',
        data: {
        //  ...cion
        },
        timeout: 1000,
        headers: {
          token: sessionStorage.getItem("token")
        }
      }).then(res => {
        
		console.log("发票列表",res)
         if (res.data.code == 1) {
          this.limit=res.data.data.data.total
     this.tableData=res.data.data.data.list
        } 
        // else {
        //   this.$message.error(res.data.mag);
        // }
        // this.$router.push("/BidSecurity/Bidpayment");
      })
          .catch((err) => {
        console.log("失败",err.response.data);
          this.$notify.error({
          message: err.response.data.msg
        });
      })
			},
    getBhlist() {
      bhlist(this.params).then(res => {
        this.BidingDocumentList = res.data.data.rows
        this.total = res.data.data.total;
      });
    },
    	handleSelectionChange(val) {
				this.multipleSelection = val;
			},
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.limit = val;
      this.getBhlist();
    },
    handleCurrentChange(val) {
      this.params.offset = parseInt(val - 1) * this.params.limit;
      this.currentpage = val;
      this.getBhlist();
    }
  }
};
</script>

<style scoped>
html body{
  height: 100% !important;
 background-color: #F5F6FA !important;
}
.block {
  padding: 10px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.state_bh {
  font-size: 18px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #1890ff;
  width: 143px;
  height: 47px;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  line-height: 47px;
  text-align: center;
  border: 2px solid #1890ff;
}
.shenflex{
  display: flex;
  flex-direction: column;
  align-items: center;
  /* padding: 20px; */
  /* padding-top: 20px; */
}
.status_bg1 {
  width: 85px;
  height: 40px;
  background-color: #ff1818;
  border-bottom-left-radius: 10px;
  position: relative;
  bottom: 87%;
  left: 94%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 18px;
}

.status_bg {
  width: 85px;
  height: 40px;
  background-color: #1795ff;
  border-bottom-left-radius: 10px;
  position: relative;
  bottom: 87%;
  left: 94%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 18px;
}

.examine_btn {
  width: 143px;
  height: 47px;
  color: #1795ff;
}

.bubble {
  color: #ffffff;
  font-size: 12px;
  width: 94px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 31px;
  margin-left: 20px;
  background-image: url("../../assets/Guarantee/Bubble.png");
}

.Guarantee_details {
  justify-content: space-around;
}

.Ge_box {
  width: 113px;
  height: 33px;
  border-radius: 4px;
  background-color: #1795ff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  margin-left: 15px;
}

.Guarantee_num {
  width: 219px;
  height: 48px;
  color: #333333;
}

.Guarantee_status_box {
  /* position: relative;
  top: 9%;
  left: 247px; */
}

.Guarantee_status {
  width: 95%;
  height: 162px;
  margin-bottom: 20px;
  background-color: #ffffff;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
}

.Guarantee_examine {
  color: #333333;
  font-size: 24px;
  margin-left: 30px;
  margin-top: 10px;
  font-weight: Bold;
  margin-bottom: 36px;
}
</style>
